<template>
  <div class="sidebar">
    <!-- 用户面板 -->
    <div class="user-panel">
      <!-- 头像悬停区域 -->
      <div
        class="avatar-hover-area"
        @mouseenter="showUserCard = true"
        @mouseleave="showUserCard = false"
      >
        <img
          src="../views/Service/touxiang.jpg"
          alt="用户头像"
          class="avatar"
        />

        <!-- 用户信息卡片 -->
        <div v-if="showUserCard" class="user-card">
          <div class="card-header">
            <img
              src="../views/Service/touxiang.jpg"
              alt="用户头像"
              class="card-avatar"
            />
            <div class="user-info">
              <div class="nickname">tb588526991</div>
              <div class="username">欢迎回来~</div>
            </div>
          </div>
          <div class="card-body">
            <div class="menu-item" @click="navigateTo">
              <i class="el-icon-user"></i>
              <span>账号管理</span>
            </div>
            <div class="menu-item logout" @click="handleLogout">
              <i class="el-icon-switch-button"></i>
              <span>退出</span>
            </div>
          </div>
        </div>
      </div>

      <div class="auth-buttons">
        <div class="welcome">欢迎~</div>
        <el-button class="register" @click="gotoResister">注册</el-button>
      </div>
      <div class="slogan">宠百汇,汇聚宠爱温暖每颗心!</div>
      <el-button type="primary" round class="login" color="#d9c596"
        >立即登录</el-button
      >
    </div>

    <!-- 快速链接 -->
    <div class="quick-links">
      <el-row>
        <el-col :span="6">
          <div class="link-item" @click="navigateToOrderList1">
            <i class="el-icon-view link-icon"></i>
            <span class="link-text">浏览记录</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="link-item" @click="navigateToOrderList2">
            <i class="el-icon-star-off link-icon"></i>
            <span class="link-text">商品收藏</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="link-item" @click="gototype">
            <i class="el-icon-shop link-icon"></i>
            <span class="link-text">商品分类</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="link-item" @click="gotopersonalcenter">
            <i class="el-icon-user-solid link-icon"></i>
            <span class="link-text">个人中心</span>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";

const showUserCard = ref(false);
const router = useRouter();

// 跳转到指定路由
const navigateTo = () => {
  showUserCard.value = false;
  router.push("/Account_Management");
};

// 退出登录处理
const handleLogout = () => {
  showUserCard.value = false;
  // 跳转到登录页面
  router.push("/login");
};
const gotoResister = () => {
  router.push("/register");
};
const navigateToOrderList1 = () => {
  showUserCard.value = false;
  router.push("/order-list1");
};
const navigateToOrderList2 = () => {
  showUserCard.value = false;
  router.push("/order-list2");
};
const gototype = () => {
  router.push("/type");
};
const gotopersonalcenter = () => {
  router.push("/personal-center");
};
</script>

<style scoped>
.sidebar {
  border-radius: 4px;
  background-color: #f4efd2;
  height: 30%;
  width: 25%;
  padding-left: 10px;
  display: flex;
  flex-direction: column;
  position: relative;
}

.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.3s;
}

.avatar:hover {
  transform: scale(1.05);
}

.avatar-hover-area {
  position: relative;
  display: inline-block;
}

.user-card {
  position: absolute;
  top: 100%;
  left: 0;
  width: 220px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  z-index: 100;
  padding: 15px;
  animation: fadeIn 0.3s;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.card-header {
  display: flex;
  align-items: center;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}

.card-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 10px;
}

.user-info {
  flex: 1;
}

.nickname {
  font-weight: bold;
  font-size: 16px;
}

.username {
  font-size: 12px;
  color: #999;
}

.card-body {
  padding-top: 10px;
}

.menu-item {
  padding: 10px 0;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s;
}

.menu-item i {
  margin-right: 10px;
  color: #666;
}

.menu-item:hover {
  color: black;
  background-color: #fbfccb;
  border-radius: 4px;
  padding-left: 10px;
}

.menu-item:hover i {
  color: #f4efd2;
}

.logout {
  color: #f56c6c;
}

.logout i {
  color: #f56c6c;
}

.logout:hover {
  color: #f56c6c;
  background-color: #fef0f0;
}

/* 原有样式保持不变 */
.user-panel {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto;
  align-items: center;
}

.avatar {
  grid-row: 1;
  grid-column: 1;
  justify-self: center;
}

.auth-buttons {
  grid-row: 1;
  grid-column: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.welcome {
  font-size: 18px;
}

.register {
  color: black;
  border: none;
  background-color: transparent;
}

.slogan {
  grid-row: 2;
  grid-column: 1 / 3;
  text-align: center;
  font-size: 18px;
  color: #666;
  margin: 5px 0;
}

.login {
  grid-row: 3;
  grid-column: 1 / 3;
  justify-self: center;
  width: 100px;
}

.quick-links {
  flex: 0 0 auto;
  text-align: center;
  padding: 5px 0;
  border-top: 1px solid #eee;
}

.link-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 0;
  cursor: pointer;
}

.link-text {
  font-size: 15px;
}

.link-icon {
  font-size: 18px;
  margin-bottom: 5px;
}

.link-item:hover {
  color: #f4a46f;
  background-color: #f0f9eb;
}
</style>
